<template>
    <IContent :spinShow="loading">
        <ISearch v-model="search">
            <Row>
                <FormItem label="状态">
                    <RadioGroup v-model="search.status" type="button" size="small">
                        <Radio label="">全部</Radio>
                        <Radio :label="0">草稿</Radio>
                        <Radio :label="1">待审核</Radio>
                        <Radio :label="2">驳回</Radio>
                        <Radio :label="3">已审核</Radio>
                        <Radio :label="4">到货</Radio>
                        <Radio :label="5">收货完成</Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem :label-width="1">
                    <Button type="primary" icon="ios-search" @click="getLists(1)" size="small">搜索</Button>
                    <Button type="success" icon="ios-add" @click="openComponent('ICreate')" size="small">添加</Button>
                </FormItem>
            </Row>
            <FormItem label="客户名称">
                <RemoteSelect url="common/select/customer" v-model="search.customer_id" size="small"></RemoteSelect>
            </FormItem>
            <FormItem label="进境关别">
                <RemoteSelect url="common/select/customs" v-model="search.district" size="small"></RemoteSelect>
            </FormItem>
            <FormItem label="进境类型">
                <RemoteSelect type="type" v-model="search.type" size="small"></RemoteSelect>
            </FormItem>
            <FormItem label="运输方式">
                <RemoteSelect type="transport" v-model="search.transport" size="small"></RemoteSelect>
            </FormItem>
            <FormItem label="包装各类">
                <RemoteSelect type="packings" v-model="search.packing_code" size="small"></RemoteSelect>
            </FormItem>

        </ISearch>
        <ITable :current="page.current" :table="table" :total="page.total" @on-page-change="pageChange">
            <template slot-scope="{ row, index }" slot="customer">
                <span>{{row.customer.code}}:{{row.customer.name}}</span>
            </template>
            <template slot-scope="{ row, index }" slot="district">
                <RemoteSpan url="common/select/customs" v-model="row.district"></RemoteSpan>
            </template>
            <template slot-scope="{ row, index }" slot="type">
                <RemoteSpan type="type" v-model="row.type"></RemoteSpan>
            </template>
            <template slot-scope="{ row, index }" slot="transport">
                <RemoteSpan type="transport" v-model="row.transport"></RemoteSpan>
            </template>
            <template slot-scope="{ row, index }" slot="piece">
                <span>{{row.piece}}</span>
                <RemoteSpan type="packings" v-model="row.packing_code"></RemoteSpan>
            </template>
            <template slot-scope="{ row, index }" slot="price">
                <span>{{row.price.toLocaleString()}} RMB</span>
            </template>
            <template slot-scope="{ row, index }" slot="weight">
                <span>{{row.weight.toLocaleString()}} KG</span>
            </template>
            <template slot-scope="{ row, index }" slot="product_count">
                <span>{{row.product_count.toLocaleString()}} 个</span>
            </template>
            <template slot-scope="{ row, index }" slot="status">
                <span v-if="row.status === 0">草稿</span>
                <span v-if="row.status === 1">待审核</span>
                <span v-if="row.status === 2">驳回</span>
                <span v-if="row.status === 3">已审核</span>
                <span v-if="row.status === 4">到货</span>
                <span v-if="row.status === 5">收货完成</span>
            </template>
            <template slot-scope="{ row, index }" slot="action">
                <Button v-if="row.status === 0 || row.status === 2" size="small"
                        @click="openComponent('IUpdate', {id: row.id})">编辑
                </Button>
                <PoptipButton v-if="row.status === 0" size="small" content="确认要删除入库单吗?"
                              @on-ok="submitForDestroy(row.id)">删除
                </PoptipButton>
                <PoptipButton v-if="row.status === 0" size="small" content="确认要提交审核吗?"
                              @on-ok="submitForConfirm(row.id)">确认
                </PoptipButton>
                <PoptipRemark v-if="row.status === 1" size="small" type="default"
                              @on-submit="submitForReject($event, row.id)" title="驳回"></PoptipRemark>
                <PoptipButton v-if="row.status === 1" size="small" content="审核之前请上传核注清单！！！"
                              @on-ok="submitForReview(row.id)">审核
                </PoptipButton>

                <PoptipButton v-if="row.status === 3" size="small" content="记得上传到货视频哦！~"
                              @on-ok="submitForArrival(row.id)">到货
                </PoptipButton>

                <PoptipButton v-if="row.status === 4" size="small" content="记得上传到货视频哦！~"
                              @on-ok="submitForComplete(row.id)">完成
                </PoptipButton>

                <Button v-if="row.status !== 0" size="small" @click="openComponent('IIView', {id: row.id})">查看</Button>
            </template>
        </ITable>

        <component v-if="componentProps.value" :is="componentProps.view" v-model="componentProps.value" :props="componentProps.props"
                   @input="getLists(page.current)"></component>
    </IContent>
</template>

<script>
    import contentListPage from "../../../mixins/contentListPage";
    import IContent from "../../../components/content/index";
    import ISearch from "../../../components/content/search";
    import ITable from "../../../components/content/table";
    import contentDrawer from "../../../mixins/contentDrawer";
    import ICreate from "./create";
    import IUpdate from "./update"
    import IIView from "./view"
    import RemoteSelect from "../../../components/form/remoteSelect";
    import RemoteSpan from "../../../components/content/remoteSpan";
    import PoptipButton from "../../../components/content/poptipButton";
    import PoptipRemark from "../../../components/content/poptipRemark";

    export default {
        name: "index",
        components: {
            PoptipRemark,
            PoptipButton,
            RemoteSpan,
            RemoteSelect,
            ITable,
            ISearch,
            IContent,
            IUpdate,
            ICreate,
            IIView
        },
        mixins: [contentListPage, contentDrawer],
        data() {
            return {
                table: {
                    columns: [
                        {
                            title: '客户代码',
                            slot: 'customer'
                        }, {
                            title: '入库单号',
                            key: 'code'
                        }, {
                            title: '入境关区',
                            slot: 'district'
                        }, {
                            title: '进境类型',
                            slot: 'type'
                        }, {
                            title: '运输方式',
                            slot: 'transport'
                        }, {
                            title: '货物总价值',
                            slot: 'price'
                        }, {
                            title: '货物重量',
                            slot: 'weight'
                        }, {
                            title: '货物件数',
                            slot: 'piece'
                        }, {
                            title: '产品个数',
                            slot: 'product_count'
                        }, {
                            title: '状态',
                            slot: 'status'
                        }, {
                            title: '创建时间',
                            key: 'created_at'
                        },
                        {
                            title: '操作',
                            slot: 'action',
                            width: 200
                        }
                    ]
                },
                search: {}
            }
        },
        methods: {
            getLists(page) {
                this.loading = true;
                this.$http.get(`warehousing/index`, {
                    params: Object.assign({}, this.search, {page: page})
                }).then((data) => {
                    this.table.data = data.data
                    this.page.total = data.total
                    this.page.current = data.current_page
                }).finally(() => {
                    this.loading = false;
                });
            },
            submitForDestroy(id) {
                this.loading = true;
                this.$http.delete(`warehousing/index/${id}`).then(() => {
                    this.getLists(this.page.current);
                }).finally(() => {
                    this.loading = false;
                })
            },
            submitForConfirm(id) {
                this.loading = true;
                this.$http.put(`warehousing/index/${id}/confirm`).then(() => {
                    this.getLists(this.page.current);
                }).finally(() => {
                    this.loading = false;
                })
            },
            submitForReview(id) {
                this.loading = true;
                this.$http.put(`warehousing/index/${id}/review`).then(() => {
                    this.getLists(this.page.current);
                }).finally(() => {
                    this.loading = false;
                });
            },
            submitForReject(remark, id) {
                this.loading = true;
                this.$http.put(`warehousing/index/${id}/reject`, {remark}).then(() => {
                    this.getLists(this.page.current);
                }).finally(() => {
                    this.loading = false;
                });
            },
            submitForArrival(id){
                this.loading = true;
                this.$http.put(`warehousing/index/${id}/arrival`).then(() => {
                    this.getLists(this.page.current);
                }).finally(() => {
                    this.loading = false;
                });
            },
            submitForComplete(id){
                this.loading = true;
                this.$http.put(`warehousing/index/${id}/compete`).then(() => {
                    this.getLists(this.page.current);
                }).finally(() => {
                    this.loading = false;
                });
            }
        }
    }
</script>

<style scoped>

</style>
